import React, { lazy, Suspense } from 'react';
import { Route, Switch, Redirect, } from 'react-router-dom';
// 引入 loading 组件
import Loading from '@/components/Loading';
// lazy: 是一个函数, 可以在react 中实现路由懒加载
// Suspense 是一个组件, 该组件用来当懒加载还没有加载出对应的组件,此时, 可以显示Suspense
// 组件对应的 loading 效果
// Suspense 组件一般用来包裹整个路由配置组件, 当访问某一个路由的时候, 组件在显示出来之前, 
// 会显示 Suspence 组件对应的 fallback的值, 值为一般为一个Loading 组件

const Home = lazy(() => import('@/views/Home'))
const Mine = lazy(() => import('@/views/Mine'))
const Login = lazy(() => import('@/views/Login'))
const Cart = lazy(() => import('@/views/Cart'))
const Detail = lazy(() => import('@/views/Detail'))
const Regist = lazy(() => import('@/views/Regist'))
const Notfind = lazy(() => import('@/views/Notfind'))
const Index = () => {
    return (
        <Suspense fallback={<Loading></Loading>}>
            <Switch>
                <Route path='/home' component={Home}></Route>
                <Route path='/cart' component={Cart}></Route>
                <Route path='/mine' component={Mine}></Route>
                <Route path='/login' component={Login}></Route>
                <Route path='/detail/:id' component={Detail}></Route>
                <Route path='/regist' component={Regist}></Route>
                <Redirect from='/' to='/home' exact></Redirect>
                <Route component={Notfind}></Route>
            </Switch>
        </Suspense>
    );
}

export default Index;
